<template>
  <div class="page-login layout-full page-dark">
    <div class="page">
      <div class="page-content">
        <div class="page-brand-info	vertical-align animation-slide-left">
          <div class="page-brand vertical-align-middle">
            <img class="brand-img" src="../../public/images/bg/2.png" width="520" alt />
          </div>
        </div>
        <div class="page-login-main animation-fade">
          <div class="vertical-align">
            <div class="vertical-align-middle">
              <div class="brand text-center" style="margin-bottom: 20px;">
                铁建投城
                <!-- <img class="brand-img" src="../../public/images/logo.png" height="120" alt /> -->
              </div>
              <form class="login-form" action method="post" id="loginForm">
                <div class="form-group">
                  <el-input class="login-txt" prefix-icon="el-icon-user" placeholder="请输入用户名" maxlength="11"
                    v-model="form_data.username" v-on:input="checkNumber(form_data.username)">
                  </el-input>
                </div>
                <div class="form-group" style="position: relative;">
                  <el-input class="login-txt" type="password" prefix-icon="el-icon-lock" placeholder="请输入密码"
                    v-model="form_data.passWord" v-on:input="checkPwd(form_data.passWord)">
                  </el-input>
                </div>
                <el-button v-on:click="Login" type="primary" :loading="loading"
                  class="login-btn dis-flex flex-middle flex-center cursor">立即登录</el-button>
                <div class="login-aggree">铁建投城发管理系统平台</div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="图片验证" :visible.sync="dialogFormVisible" top="35vh" :close-on-click-modal="false" width="25%"
      center>
      <el-form :inline="true" :model="ruleForm">
        <el-form-item label="输入验证码：" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.imgCode" autocomplete="off" placeholder="输入图片验证码"></el-input>
        </el-form-item>
        <el-form-item>
          <img @click="getImgCode" :src="imgUrl" height="40" alt style="cursor: pointer;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="chekImageCode">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      formLabelWidth: "100px",
      form_data: {
        username: "",
        passWord: "",
      },
      ruleForm: {
        imgCode: "",
        imgKeys: "",
      },
      imgUrl: "",
      time: 60,
      btnText: "获取验证码",
      beginning: false,
    };
  },
  //进入页面加载
  mounted: function () {
    var that = this;
    //that.getImageCode();
  },
  methods: {
    sentCode() {
      var that = this;
      if (that.beginning) return false;
      if (that.form_data.username === "") {
        that.$message({
          type: "error",
          message: `操作提示: ${"手机号不能为空"}`,
        });
        that.loading = false;
        return;
      }
      that.getImageCode();
      that.dialogFormVisible = true;
    },
    getImgCode() {
      var that = this;
      that.getImageCode();
    },
    checkNumber(val) {
      this.form_data.username = val;
    },
    checkPwd(val) {
      this.form_data.passWord = val;
    },

    getImageCode() {
      const that = this;
      that.axios.post("/getImageCode").then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.imgUrl = res.data.img;
          that.ruleForm.imgKeys = res.data.key;
        } else {
          that.loading = false;
        }
      });
    },

    async chekImageCode() {
      const that = this;
      if (that.beginning) return false;

      if (that.form_data.user_name === "") {
        that.$message({
          type: "error",
          message: `操作提示: ${"图片验证码不能为空"}`,
        });
        return;
      }

      that.axios
        .post("/getMobileCode", {
          mobile: that.form_data.username,
          code: that.ruleForm.imgCode,
          key: that.ruleForm.imgKeys,
          type: 0,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            that.ruleForm.imgCode = "";
            that.dialogFormVisible = false;
            that.beginning = true;
            that.btnText = "重新获取";
            that.timer = setInterval(() => {
              let tempTime = that.time;
              if (tempTime == 0) {
                // 倒计时结束
                clearInterval(that.timer);
                that.beginning = false;
                that.time = 60;
                return;
              }
              that.time--;
            }, 1000);
          } else {
            that.ruleForm.imgCode = "";
            that.$message.error(res.msg);
            that.getImageCode();
          }
        });
    },

    async Login() {
      const that = this;
      that.loading = true;
      if (that.form_data.username === "") {
        that.$message({
          type: "error",
          message: `操作提示: ${"手机号不能为空"}`,
        });
        that.loading = false;
        return;
      }
      if (that.form_data.passWord === "") {
        that.$message({
          type: "error",
          message: `操作提示: ${"请您输入手机验证码"}`,
        });
        that.loading = false;
        return;
      }
      that.axios
        .post("/login", {
          username: that.form_data.username,
          password: that.form_data.passWord,
        })
        .then((res) => {
          if (res.code == 200) {
            sessionStorage.setItem("access-token", res.data);
            that.$message.success(res.msg);
            this.$router.push("/index");
          } else {
            that.loading = false;
            that.$message.error(res.msg);
          }
        });
    },
  },
};
</script>

<style>
body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.57142857;
  color: #76838f;
  text-align: left;
  background-color: #fff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.page-dark.layout-full::after {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(38, 50, 56, 0.1);
}

.page-dark.layout-full {
  z-index: 0;
  color: #fff;
}

.page-login {
  height: 100%;
  min-height: 540px;
  overflow: hidden;
  padding-top: 0;
}

.layout-full {
  height: 100%;
  padding-top: 0 !important;
}

.page-login .page {
  background: transparent;
}

.vertical-align {
  font-size: 0;
}

.layout-full .page {
  padding: 0;
  background-color: transparent;
  width: 880px;
  margin: 200px auto 0 auto;
}

.h-full {
  min-height: 500px;
}

.page-login .page-content {
  padding-right: 470px;
  position: absolute;
}

.page-content {
  padding: 0px;
}

.page-login .page-brand-info {
  height: 100%;
}

.animation-slide-left {
  -webkit-animation-name: slide-left;
  animation-name: slide-left;
}

.page-login .page-brand-info .page-brand {
  padding: 0;
  width: 520px;
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-middle,
.vertical-align-bottom {
  display: inline-block;
  max-width: 100%;
  font-size: 1rem;
}

.page-dark.layout-full .brand {
  margin-bottom: 22px;
  margin-top: 52px;
  font-size: 32px;
  text-align: center;
}

.page-login .page-brand-info .page-brand h2 {
  color: #fff;
  width: 118px;
  text-align: center;
}

.page-dark.layout-full::before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  background-position: center top;
  background-size: cover;
}

.page-login:before {
  background-image: url(../../public/images/bg/1.png);
  background-size: cover;
}

.page-content> :not(script):last-child {
  margin-bottom: 0 !important;
}

.page-login-main {
  position: absolute;
  right: 0;
  top: 0;
  min-height: 550px;
  padding: 150px 60px 180px;
  padding: 0 60px;
  color: #76838f;
  background: #fff;
  border-radius: 0 15px 15px 0;
}

.page-login-main .vertical-align {
  height: 100%;
  box-sizing: border-box;
}

.vertical-align {
  font-size: 0;
}

.vertical-align:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: "";
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-middle,
.vertical-align-bottom {
  display: inline-block;
  max-width: 100%;
  font-size: 1rem;
}

.page-login .login-form {
  width: 350px;
  margin: 45px 0 20px;
}

.form-group {
  margin: 30px 0;
}

.login-btn {
  width: 100%;
  background-color: rgb(48, 120, 255);
  color: rgb(255, 255, 255);
  height: 50px;
  border-radius: 25px;
}

.login-txt .el-input__inner {
  border: none;
  height: 48px;
  border-radius: 24px;
  background-color: #f0f3f8;
  padding-left: 50px;
}

.login-txt .el-input__prefix {
  font-size: 20px;
  left: 15px;
}

.login-msg {
  position: absolute;
  top: 0;
  right: 15px;
  color: #3078ff;
  line-height: 48px;
  font-size: 14px;
  cursor: pointer;
}

.login-aggree {
  padding-top: 70px;
  font-size: 14px;
  color: #76838f;
  text-align: center;
}

.text-center {
  text-align: center;
}
</style>